<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="/css/total/signup.css">
  <title>报名支付</title>
  <% include ../component/common_meta.html %>
</head>

<body>
  <div id="app" style="height:100%">
    <div v-if="false" style="font-size:0.3rem;" id="show">您的浏览器版本太低请升级浏览器或者使用Chrome浏览器</div>
    <div v-cloak class="cloak">
      <div class="pay">
        <div class="top">
          <img :src="examDetail.titleImg" alt="">
          <p class="yd">{{examDetail.title}}</p>
          <p class="price">价格：
            <span>¥{{examDetail.price}}</span>
          </p>
        </div>
        <p class="desc">{{examDetail.exam_detail}}</p>
        <div class="number" v-if="this.examDetail.type == 2">
          <span>购买数量</span>
          <div class="num">
            <span class="numReduce" @click="handleNumReduce">-</span>
            <span class="numChange">{{signUpInfo.exam_count}}</span>
            <span class="numAdd" @click="handleNumAdd">+</span>
          </div>
        </div>
        <div class="nobook" v-if="this.examDetail.type != 2">
          <% include ../signup/yy/userInfo.html %>
        </div>
        <div class="book" v-if="this.examDetail.type == 2">
          <% include ../signup/tg/userInfo.html %>
            <% include ../signup/tg/chooseArt.html %>
              <% include ../signup/tg/chooseType.html %>
        </div>
        <% include ../signup/footer_pay_type.html %>
          <div class="line">支付信息</div>
          <div class="payInfo">
            <p>
              <span class="payInfoLeft">商品价格</span>
              <span class="payInfoRight">￥{{examDetail.original_price}}</span>
            </p>
            <p>
              <span class="payInfoLeft">运费</span>
              <span class="payInfoRight">+￥0</span>
            </p>
            <p>
              <span class="payInfoLeft">优惠</span>
              <span class="payInfoRight">-￥{{payMode.yhmoney}}</span>
            </p>
            <p class="payInfoLine"></p>
            <p class="payInfoRight">需支付：
              <span>￥{{examDetail.price}}</span>
            </p>
            <p class="lxkf">支付中如果遇到任何问题请联系客服QQ:1754863255</p>
          </div>
          <footer v-if="pay">
            <span id="dfUrl" v-show=false>{{df_url}}</span>
            <button class="replace df_url_btn" @click="handleReplace" id="id_copy" data-clipboard-action="copy" data-clipboard-target="#dfUrl">代付款</button>
            <button @click="handleSubmit">立即支付</button>
          </footer>
          <div class="mode" v-if="mode">
            <div class="paySuccess" v-if="paySuccess">
              <img src="/img/ygsuccess02.jpg" alt="">
              <p>支付成功</p>
              <span>￥{{examDetail.price}}</span>
            </div>
            <div class="payFail" v-if="payFail">
              <img src="/img/fails.png" alt=""
              <p>微信支付失败，请重试</p>
              <button style="border-right: 0.02rem solid #EEE;" @click="handleFail">取消</button>
              <button @click="handleSubmit">重试</button>
            </div>
          </div>
      </div>
    </div>
  </div>
  <% include ../component/common_js.html %>
  <script src="https://sfile.tl100.com/js/libs/clipboard.min.js"></script>
  <script src="/js/pay/pay.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        my_invitation_code: '',
        df_url: '',
        examDetail: {
          price: '',
          title: '',
          original_price: '',
          titleImg: '',
          exam_detail: '',
          type: '',
        },
        cityss: '',
        loginInfo: {
          phone: '',
          sms: '',
          smsNum: '',
          isSend: false,
          mode: false,
        },
        payMode: {
          pay: '购买优惠：',
          yhmoney: '',
        },
        signUpInfo: {
          realname: '',
          qq: '',
          city: '',
          pay_type: 1,
          exam_id: 2,
          invitation_code: '',
          return_url: '',
          origin: '',
          email: '',
          code: '',
          token: '',
          from: 'wap',
          exam_option: {
            name: '',
            subject: ''
          },
          address: '',
          exam_count: 1,
          sale_id: '',
          group_purchase_id: '', //团购id
          receiving_info_id: '',
          user_id: '' // 代付id
        },
        addAddressMode: false,
        smsSending: false,
        enter: false,
        submiting: false,   // 支付
        replace: false,  // 代付
        pay: true,
        typeMode: false,
        typeMode2: false,
        typeArt: false,
        paySuccess: false,
        payFail: false,
        mode: false //支付成功或失败的弹框
      },
      mounted: function () {
        if (localStorage.getItem('token') && localStorage.getItem('token') != '') {
          this.signUpInfo.token = localStorage.getItem('token');
          this.getExamDetail();
          this.getUserInfo();
        } else {
          window.location.href = '/tlmall/login?' + window.location.href;  
        }
        <% if (address) {%>
          this.signUpInfo.address = "<%= address %>";
        <%}%>
        <% if (exam_id) {%>
          this.signUpInfo.exam_id = "<%= exam_id %>";
        <%}%>
        <% if (code) {%>
          this.signUpInfo.code = "<%= code %>";
        <%}%>
        
        <% if (address_name) {%>
          this.signUpInfo.realname = "<%= address_name %>";
        <%}%>
        <% if (address_phone) {%>
          this.loginInfo.phone = "<%= address_phone %>";
        <%}%>
        // orgin
        <% if (origin) {%>
          this.signUpInfo.origin = "<%= origin %>";
        <%}%> 
        <% if (sale_id) {%>
          this.signUpInfo.sale_id = "<%= sale_id %>";
        <%}%>
        // 获取从首页传来的邀请码，首页传来的邀请码一般是别人分享的邀请码
        <% if (invitation_code) {%>
          this.signUpInfo.invitation_code = "<%= invitation_code %>";
        <%}%>
        // 在首页的controllers里判断页面在哪里打开，pt为wechat/wap/qq
        <% if (pt) {%>
          this.signUpInfo.from = "<%= pt %>";
        <%}%>
        if (this.signUpInfo.from == 'wechat') {
          this.signUpInfo.pay_type = 1;
        }
        if (this.signUpInfo.from == 'wap') {
          this.signUpInfo.pay_type = 2;
        }
        if (this.signUpInfo.from == 'qq') {
          this.signUpInfo.pay_type = 3;
        }
        this.signUpInfo.return_url = 'https://m.tl100.com/tlmall/signup?exam_id='+this.signUpInfo.exam_id;
        <%if (out_trade_no) {%>
        var vm = this;
          var params = {};
          params.order_id = "<%= out_trade_no %>";
          params.token = localStorage.getItem('token');
          api.post('/api/v2/exam/getOrder', params)
            .then(function (response) {
              var rs_data = response.data.data;
              if (response.data.res_code == 1) {
                vm.paySuccess = true;
                vm.mode = true;
                setTimeout(function () {
                  vm.paySuccess = false;
                  vm.mode = false;
                  location.replace("/tlmall/order_list");
                }, 1000) 
              } else {
                vm.payFail = true;
                vm.mode = true;
                // alert('支付失败,请刷新页面重试！');
                setLog('/api/v2/exam/getOrder:fail', JSON.stringify(rs_data));
              }
            })
            .catch(function (err) {
              console.log("fail");
              console.log(err);
            });
        <%}%>
      },
      methods: {
        getUserInfo: function () {
          var vm = this;
          var token = localStorage.getItem('token');
          api.post('/api/v2/user/getUserInfo',{
            token
          }).then(res => {
            if (res.data.res_code == 1) {
              var res_data = res.data.data;
              <% if (!address) {%>
                vm.signUpInfo.realname = res_data.user_info.realname;
                vm.loginInfo.phone = res_data.user_info.phone;
                vm.signUpInfo.address = res_data.user_info.default_receiving_info.address;
              <%}%>
              vm.signUpInfo.qq = res_data.user_info.qq;
              vm.my_invitation_code = res_data.user_info.invitation_code;
            } else if (res.data.res_code <= -900) {    // -900
              localStorage.removeItem('token');
              window.location.href = '/tlmall/login?' + window.location.href;
            }
          }).catch(err => {
            setLog('/api/v2/user/getUserInfo', JSON.stringify(err));
          })
        },
        getExamDetail() {
          var vm = this;
          api.post('/api/v2/exam/getExamDetail', {
            exam_id: "<%= exam_id %>",
            sale_id: "<%= sale_id%>",
            token: localStorage.getItem('token'),
            exam_count: this.signUpInfo.exam_count
          }).then(res => {
            if (res.data.res_code == 1) {
              var res_data = res.data.data;
              vm.examDetail.title = res_data.exam_name;
              vm.examDetail.titleImg = res_data.img_url == '' ? '/img/tl.jpg' : res_data.img_url;
              vm.examDetail.price = res_data.price;
              vm.examDetail.original_price = res_data.original_price;
              vm.examDetail.exam_detail = res_data.description;
              vm.examDetail.type = res_data.type;
              vm.payMode.yhmoney = res_data.save_money;
              if (res_data.state == -1) {
                alert('该商品已下架');
                window.location.replace('/tlmall');
                return;
              }
              // 如果在微信中，微信分享
              <%if (pt =='wechat') {%>
                wxObj({
                  shareUrl: "https://m.tl100.com/tlmall/intro?o=share&exam_id=<%=exam_id%>&sale_id=<%=sale_id%>&invitation_code=" + this.my_invitation_code,
                  title: res_data.share_title,
                  desc: res_data.share_desc,
                  link: '&',
                  imgUrl: res_data.share_img_url
                });
              <%} else {%>
                // 在其他情况下设置meta标签
                document.querySelector('meta[itemprop="name"]').setAttribute('content', res_data.share_title)
                document.querySelector('meta[itemprop="image"]').setAttribute('content', res_data.share_img_url)
                document.querySelector('meta[name="description"]').setAttribute('content', res_data.share_desc)
              <%}%>
            } else if (res.data.res_code <= -900) {
              localStorage.removeItem('token');
              window.location.href = '/tlmall/login?' + window.location.href;
            }
          }).catch(err => {
            setLog('/api/v2/exam/getExamDetail:catch', JSON.stringify(err));
          })
        },
        handleToggle: function () {
          // 切换账号
          localStorage.removeItem('token');
          location.replace('/tlmall/signup');
        },
        changeVersion(name) {
          // 选择版本，下拉菜单消失
          this.signUpInfo.exam_option.name = name;
          this.typeMode = false;
          this.pay = true;
        },
        changeSubject(subject) {
          // 选择文理，隐藏下拉菜单，支付按钮显示
          this.signUpInfo.exam_option.subject = subject;
          this.typeMode2 = false;
          this.pay = true;
        },
        handleChooseType() {
          // 显示下拉菜单，隐藏支付按钮
          this.typeMode = true;
          this.pay = false;
        },
        handleChooseArt() {
          // 显示文理的下拉菜单，隐藏支付按钮
          this.typeMode2 = true;
          this.pay = false;
        },
        handleCancel() {
          // 取消按钮，下拉菜单消失
          this.typeMode = false;
          this.typeMode2 = false;
          this.pay = true;
        },
        handleAddAddress() {
          location.href = '/tlmall/address'+location.search+'&address_origin=signup';
        },
        handleNumReduce() {
          // 数量减
          if (this.signUpInfo.exam_count == 1) {
            this.signUpInfo.exam_count = 1;
            document.querySelector('.numReduce').style.color = '#BDBFC2'
            return;
          }
          this.signUpInfo.exam_count--;
          this.getExamDetail()
        },
        handleNumAdd() {
          // 数量加
          this.signUpInfo.exam_count++;
          document.querySelector('.numReduce').style.color = '#6C7075';
          this.getExamDetail()
        },
        handleReplace() {
        // 代付款
          if (this.replace) {
            return;            
          }
          String.prototype.trim = function() {
            return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
          }
          if (this.signUpInfo.realname.trim() == "") {
            alert('姓名不能为空');
            return;
          }
          if (this.signUpInfo.realname.trim().length > 6) {
            alert('最多输入6个汉字或英文字母！');
            return;
          }
          // 去除空格验证 
          if (this.type != 2) {
            if (this.signUpInfo.qq.trim() == '') {
                alert('qq号不能为空');
                return;
            }
          } else {
            if (this.signUpInfo.exam_option.name.trim() == "") {
              alert('请选择版本');
              return;
            }
            if (this.signUpInfo.exam_option.subject.trim() == "") {
                alert('请选择文理');
                return;
            }
            if (this.signUpInfo.address.trim() == '') {
                alert('地址不能为空');
                return;
            }
          }
          this.replace = true
          // 代付款
          var vm = this;
          api.post('/api/v2/exam/getPayForAnotherId', this.signUpInfo).then(res => {
            var url = '/tlmall/another_pay?pay_for_another_id=' + res.data.data;
            if (location.search == "") {
              url += "pt=<%= pt %>&o=<%= origin %>";
            } else {
              var query = window.location.search.substr(1);
              var arr = query.split("&");
              for (var i = 0;i<arr.length;i++) {
                if (arr[i].indexOf('code') > -1) {
                  console.log(arr)
                } else {
                  url += "&" + arr[i];
                }
              } 
            }
            location.href = url;
            this.replace = false;
            // var clipboard = new ClipboardJS('.df_url_btn', {
            //   text: function () {
            //     return vm.df_url;
            //   }
            // });
            // clipboard.on("success", function (e) {
            //   alert('代付链接已复制到剪切板，分享好友代付');
            //   console.info("复制成功，复制内容:" + e.text);
            //   clipboard.destroy()
            // });
            // clipboard.on("error", function (e) {
            //   clipboard.destroy()
            // })
            // }).catch(err => {
            //   setLog('/api/v2/exam/getPayForAnotherId:catch', JSON.stringify(err));
            //   this.replace = false;
            })
        },
        handleFail() {
          // 取消支付
          this.mode = false;
          this.payFail = false;
        },
        handleSubmit: function () {
          String.prototype.trim = function() {
            return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
          }
          if (this.submiting) {
              return;
          }
          if (this.signUpInfo.realname.trim() == "") {
            alert('姓名不能为空');
            return;
          }
          if (this.signUpInfo.realname.trim().length > 6) {
            alert('最多输入6个汉字或英文字母！');
            return;
          }
          // 去除空格验证 
          if (this.type == 2) {
            if (this.signUpInfo.qq.trim() == '') {
                alert('qq号不能为空');
                return;
            }
          } else {
            if (this.signUpInfo.exam_option.name.trim() == "") {
              alert('请选择版本');
              return;
            }
            if (this.signUpInfo.exam_option.subject.trim() == "") {
                alert('请选择文理');
                return;
            }
            if (this.signUpInfo.address.trim() == '') {
                alert('地址不能为空');
                return;
            }
          }

          // 根据支付类型判断查询接口。
          var getOrder = '/api/v2/exam/getOrder';
          var that = this;
          this.submiting = true;
          // 传入支付接口和查询订单接口
          submit(this, '/api/v2/exam/buy', getOrder);
        },
      }

    })

  </script>
</body>

</html>